import React from 'react';
import { Balloon, Tag } from '@teamix/ui';
import Tree from 'components/diffTree';
import CommitRange from 'components/commitSelect';
import ListLoading from 'atComponents/ListLoading';
import ListEmpty from 'atComponents/ListEmpty';
import './index.scss';
import intl from '../../../../../../../../../locale';
const prefix = 'mr-change-tree';
export default class MrLeftTree extends React.Component {
  renderNoChange = () => {
    return (
      <div className="mr-commits-empty">
        <ListEmpty
          size="small"
          type="card"
          content=""
          description={intl.get({
            id: 'code-assets.components.leftTree.NoChangesHaveBeenMade',
            defaultMessage: '当前评审没有任何改动',
          })}
          image="none"
          className="no-content no-btns"
        />
      </div>
    );
  };

  render() {
    const { diffsCount, isPushRecordsFetched, commits } = this.props;
    // 请求commits区间
    if (!isPushRecordsFetched) {
      return <ListLoading />;
    }
    // 没有改动
    if (!commits.length) {
      return this.renderNoChange();
    }

    return (
      <div className={`${prefix}`}>
        <div className={`${prefix}-top`}>
          <div>
            <CommitRange {...this.props} />
          </div>
          {diffsCount ? (
            <div>
              {diffsCount.additions ? (
                <Balloon.Tooltip
                  align="t"
                  trigger={<Tag color="green">+ {diffsCount.additions}</Tag>}
                  text={intl.get(
                    {
                      id: 'code-assets.components.leftTree.AddedDiffscountadditionsLines',
                      defaultMessage: '增加了 {diffsCountAdditions} 行',
                    },
                    { diffsCountAdditions: diffsCount.additions },
                  )}
                />
              ) : null}
              {diffsCount.deletions ? (
                <Balloon.Tooltip
                  align="t"
                  trigger={<Tag color="red">- {diffsCount.deletions}</Tag>}
                  text={intl.get(
                    {
                      id: 'code-assets.components.leftTree.DiffscountdeletionsLinesHaveBeenDeleted',
                      defaultMessage: '删除了 {diffsCountDeletions} 行',
                    },
                    { diffsCountDeletions: diffsCount.deletions },
                  )}
                />
              ) : null}
            </div>
          ) : null}
        </div>
        <div id="J_changesLeft" className="changes-left">
          <Tree {...this.props} />
        </div>
      </div>
    );
  }
}
